<template>
  <div>
    <el-tree
      :data="data"
      node-key="indexId"
      ref="selectTree"
      :expand-on-click-node="false"
      :highlight-current="true"
      :default-expand-all="true"
      :current-node-key="highlightedNodeId"
      @node-click="handleClick"
    >
      <div class="custom_tree_node" slot-scope="{ data }">
        <div
          style="display: flex; align-items: center; justify-content: space-between;"
          :style="{ width: nodeWidth - (data.level - 1) * 16 + 'px' }"
        >
          <div class="state" v-if="data.type == 1 || data.type == 2">
            <div v-if="data.status == 1" class="round"></div>
            <div v-if="data.status == 2" class="round_finish"></div>
            <div v-if="data.status == -1" class="round_fail"></div>
          </div>
          <div class="state" v-if="data.type == 3 || data.type == 4">
            <div style="margin: 3px 5px 0 0">
              <img
                v-if="data.studyStatus == 1"
                class="acting_icon"
                src="@/assets/images/courseAdd/acting_icon.png"
                alt="加载失败"
              />
              <i v-if="data.studyStatus == 2" class="el-icon-success"></i>
              <i v-if="data.studyStatus == -1" class="el-icon-error"></i>
            </div>

            <!-- 学生端学习进度 查看课程目录 -->
            <div
              class="exam_icon"
              v-if="
                data.examId &&
                data.examSubmitType == 1 &&
                !data.leaderPercentage
              "
            >
              考
            </div>
            <div
              class="leader_icon"
              v-if="
                data.homeworkId &&
                data.homeworkSubmitType == 1 &&
                !data.homeworkLeaderPercentage
              "
            >
              作
            </div>
            <div
              class="exam_icon"
              v-if="
                data.examId &&
                (data.examSubmitType == 2 ||
                  (data.examSubmitType == 1 && data.leaderPercentage > 0))
              "
            >
              组
            </div>
            <div
              class="leader_icon"
              v-if="
                data.homeworkId &&
                (data.homeworkSubmitType == 2 ||
                  (data.homeworkSubmitType == 1 &&
                    data.homeworkLeaderPercentage > 0))
              "
            >
              组
            </div>
          </div>
          <div style="flex: 1; overflow: hidden">
            <tooltip :text="`${data.indexName}`" width="100%"></tooltip>
          </div>
          <div class="flex_center" style="padding-right: 10px">
            <!--  考核状态【examStatus】等于0或2（考试状态 0.未开始 1.已通过 2.进行中 3.待批改 -1.未通过）-->
            <!-- 考核 ==================-->
            <template
              v-if="
                data.examStatus == 3 &&
                ((leaderId == studentId && data.leaderPercentage > 0) ||
                  data.selfPercentage > 0 ||
                  (data.examSubmitType == 2 &&
                    data.otherGroupPercentage > 0 &&
                    data.otherGroupCorrectionFlag))
              "
            >
              <el-popover placement="bottom" trigger="hover">
                <el-button
                  v-if="leaderId == studentId && data.leaderPercentage > 0"
                  @click="scoreRouteTo(2, data.examPaperId, 1)"
                  type="text"
                  size="mini"
                >
                  组长评分
                </el-button>
                <el-button
                  v-if="data.selfPercentage > 0"
                  @click="scoreRouteTo(3, data.examPaperId, 1)"
                  size="mini"
                  type="text"
                >
                  学生自评
                </el-button>
                <el-button
                  @click="scoreRouteTo(4, data.examPaperId, 1)"
                  v-if="
                    data.examSubmitType == 2 &&
                    data.otherGroupPercentage > 0 &&
                    data.otherGroupCorrectionFlag
                  "
                  size="mini"
                  type="text"
                >
                  组间互评
                </el-button>
                <div class="examSBtn" slot="reference">评分</div>
              </el-popover>
            </template>
            <template v-if="data.examStatus == 1 || data.examStatus == -1">
              <el-popover
                v-if="data.examPaperId"
                placement="right"
                @show="showScoreInfo(data.examPaperId, data)"
                trigger="hover"
              >
                <el-table
                  v-if="data.examSubmitType == 1"
                  :data="scoreListInfo"
                  v-loading="loading"
                >
                  <el-table-column
                    prop="studentName"
                    align="center"
                    label="姓名"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == 1,
                        }"
                      >
                        {{ scope.row.studentName }}
                        <span v-if="scope.row.isLeader">(组长)</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="teacherScorePercent > 0"
                    prop="teacherScore"
                    align="center"
                    label="教师评价（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == 1,
                        }"
                      >
                        {{ scope.row.teacherScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="selfScorePercent > 0"
                    prop="selfScore"
                    align="center"
                    label="学生自评（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == 1,
                        }"
                      >
                        {{ scope.row.selfScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="leaderScorePercent > 0"
                    prop="leaderScore"
                    align="center"
                    label="组长评分（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == 1,
                        }"
                      >
                        {{ scope.row.leaderScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column width="150" prop="totalScore" align="center">
                    <template #header>
                      <span>
                        得分
                        <el-tooltip
                          effect="dark"
                          :content="content"
                          placement="top"
                        >
                          <i
                            style="cursor: pointer"
                            class="el-icon-question"
                          ></i>
                        </el-tooltip>
                      </span>
                    </template>
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == 1,
                        }"
                      >
                        {{ scope.row.score }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <el-table
                  v-if="data.examSubmitType == 2"
                  :data="scoreListInfo"
                  v-loading="loading"
                >
                  <el-table-column
                    prop="studentName"
                    align="center"
                    label="姓名"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == 1,
                        }"
                      >
                        {{ scope.row.studentName }}
                        <span v-if="scope.row.isLeader">(组长)</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="teacherScorePercent > 0"
                    prop="teacherScore"
                    align="center"
                    label="教师评价（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == 1,
                        }"
                      >
                        {{ scope.row.teacherScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="selfScorePercent > 0"
                    prop="selfScore"
                    align="center"
                    label="学生自评（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == 1,
                        }"
                      >
                        {{ scope.row.selfScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="leaderScorePercent > 0"
                    prop="leaderScore"
                    align="center"
                    label="组长评分（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == 1,
                        }"
                      >
                        {{ scope.row.leaderScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="otherGroupScorePercent > 0"
                    prop="otherGroupScore"
                    align="center"
                    label="组间互评（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == 1,
                        }"
                      >
                        {{ scope.row.otherGroupScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column width="150" prop="totalScore" align="center">
                    <template #header>
                      <span>
                        得分
                        <el-tooltip
                          effect="dark"
                          :content="content"
                          placement="top"
                        >
                          <i
                            style="cursor: pointer"
                            class="el-icon-question"
                          ></i>
                        </el-tooltip>
                      </span>
                    </template>
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.examStatus == 1,
                        }"
                      >
                        {{ scope.row.score }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <div
                  slot="reference"
                  :class="{
                    ju_color: data.examStatus == 1,
                    red_color: data.examStatus == -1,
                  }"
                >
                  {{ data.score }}
                </div>
              </el-popover>
              <div
                v-if="!data.examPaperId"
                @click="showScoreInfo(data.examPaperId, data)"
                :class="{
                  ju_color: data.examStatus == 1,
                  red_color: data.examStatus == -1,
                }"
              >
                {{ data.score }}
              </div>
              <img
                v-if="
                  data.examPaperId ||
                  (!data.examPaperId && data.studyStatus == 2)
                "
                @click="routeTo(data.examPaperId, 1)"
                class="exam_paper_png"
                src="@/assets/images/courseAdd/examDetail.png"
                alt="加载失败"
              />
            </template>
            <div
              style="margin: 0 20px"
              v-if="
                data.homeworkPaperId &&
                (data.homeworkStatus == 1 || data.homeworkStatus == -1) &&
                data.examPaperId &&
                (data.examStatus == 1 || data.examStatus == -1)
              "
            >
              |
            </div>
            <!-- ========================= -->
            <!-- 作业 -->

            <template
              v-if="
                data.homeworkStatus == 3 &&
                ((leaderId == studentId && data.homeworkLeaderPercentage > 0) ||
                  data.homeworkSelfPercentage > 0 ||
                  (data.homeworkSubmitType == 2 &&
                    data.homeworkOtherGroupPercentage > 0 &&
                    data.homeworkOtherGroupCorrectionFlag))
              "
            >
              <el-popover placement="bottom" trigger="hover">
                <el-button
                  v-if="
                    leaderId == studentId && data.homeworkLeaderPercentage > 0
                  "
                  @click="scoreRouteTo(2, data.homeworkPaperId, 6)"
                  type="text"
                  size="mini"
                >
                  组长评分
                </el-button>
                <el-button
                  v-if="data.homeworkSelfPercentage > 0"
                  @click="scoreRouteTo(3, data.homeworkPaperId, 6)"
                  type="text"
                  size="mini"
                >
                  学生自评
                </el-button>
                <el-button
                  @click="scoreRouteTo(4, data.homeworkPaperId, 6)"
                  v-if="
                    data.homeworkSubmitType == 2 &&
                    data.homeworkOtherGroupPercentage > 0 &&
                    data.homeworkOtherGroupCorrectionFlag
                  "
                  type="text"
                  size="mini"
                >
                  组间互评
                </el-button>
                <div class="homeworkSbtn" slot="reference">评分</div>
              </el-popover>
            </template>
            <template
              v-if="data.homeworkStatus == 1 || data.homeworkStatus == -1"
            >
              <el-popover
                v-if="data.homeworkPaperId"
                placement="right"
                @show="showScoreInfo(data.homeworkPaperId, data)"
                trigger="hover"
              >
                <el-table
                  v-if="data.homeworkSubmitType == 1"
                  :data="scoreListInfo"
                  v-loading="loading"
                >
                  <el-table-column
                    prop="studentName"
                    align="center"
                    label="姓名"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == 1,
                        }"
                      >
                        {{ scope.row.studentName }}
                        <span v-if="scope.row.isLeader">(组长)</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="teacherScorePercent > 0"
                    prop="teacherScore"
                    align="center"
                    label="教师评价（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == 1,
                        }"
                      >
                        {{ scope.row.teacherScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="selfScorePercent > 0"
                    prop="selfScore"
                    align="center"
                    label="学生自评（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == 1,
                        }"
                      >
                        {{ scope.row.selfScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="leaderScorePercent > 0"
                    prop="leaderScore"
                    align="center"
                    label="组长评分（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == 1,
                        }"
                      >
                        {{ scope.row.leaderScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column width="150" prop="totalScore" align="center">
                    <template #header>
                      <span>
                        得分
                        <el-tooltip
                          effect="dark"
                          :content="content"
                          placement="top"
                        >
                          <i
                            style="cursor: pointer"
                            class="el-icon-question"
                          ></i>
                        </el-tooltip>
                      </span>
                    </template>
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == 1,
                        }"
                      >
                        {{ scope.row.score }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <el-table
                  v-if="data.homeworkSubmitType == 2"
                  :data="scoreListInfo"
                  v-loading="loading"
                >
                  <el-table-column
                    prop="studentName"
                    align="center"
                    label="姓名"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == 1,
                        }"
                      >
                        {{ scope.row.studentName }}
                        <span v-if="scope.row.isLeader">(组长)</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="teacherScorePercent > 0"
                    prop="teacherScore"
                    align="center"
                    label="教师评价（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == 1,
                        }"
                      >
                        {{ scope.row.teacherScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="selfScorePercent > 0"
                    prop="selfScore"
                    align="center"
                    label="学生自评（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == 1,
                        }"
                      >
                        {{ scope.row.selfScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="leaderScorePercent > 0"
                    prop="leaderScore"
                    align="center"
                    label="组长评分（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == 1,
                        }"
                      >
                        {{ scope.row.leaderScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="otherGroupScorePercent > 0"
                    prop="otherGroupScore"
                    align="center"
                    label="组间互评（卷面）"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == 1,
                        }"
                      >
                        {{ scope.row.otherGroupScore }} /100
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column width="150" prop="totalScore" align="center">
                    <template #header>
                      <span>
                        得分
                        <el-tooltip
                          effect="dark"
                          :content="content"
                          placement="top"
                        >
                          <i
                            style="cursor: pointer"
                            class="el-icon-question"
                          ></i>
                        </el-tooltip>
                      </span>
                    </template>
                    <template slot-scope="scope">
                      <div
                        :class="{
                          red_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == -1,
                          green_color:
                            scope.row.studentId == studentId &&
                            data.homeworkStatus == 1,
                        }"
                      >
                        {{ scope.row.score }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <div
                  slot="reference"
                  :class="{
                    blue_color: data.homeworkStatus == 1,
                    red_color: data.homeworkStatus == -1,
                  }"
                >
                  {{ data.homeworkScore }}
                </div>
              </el-popover>
              <div
                v-if="!data.homeworkPaperId"
                @click="showScoreInfo(data.homeworkPaperId, data)"
                :class="{
                  blue_color: data.homeworkStatus == 1,
                  red_color: data.homeworkStatus == -1,
                }"
              >
                {{ data.homeworkScore }}
              </div>
              <img
                v-if="
                  data.homeworkPaperId ||
                  (!data.homeworkPaperId && data.studyStatus == 2)
                "
                @click="routeTo(data.homeworkPaperId, 6)"
                class="exam_paper_png"
                src="@/assets/images/courseAdd/homeworkDetail.png"
                alt="加载失败"
              />
            </template>
          </div>
        </div>
      </div>
    </el-tree>
    <el-dialog
      @close="cancel"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="500px"
      :title="title"
      :visible.sync="showScoreDialog"
      append-to-body
    >
      <div v-if="title == '考核互评'">
        <div class="items">
          <div class="label">内容：</div>
          <div class="value">{{ scoreInfo.ancestorsName }}</div>
        </div>
        <div class="items">
          <div class="label">给分模式：</div>
          <div class="value">
            <el-radio-group
              v-removeAriaHidden
              @change="changePaperType"
              v-model="scoreInfo.paperType"
            >
              <el-radio-button label="1">成员同分</el-radio-button>
              <el-radio-button label="2">独立配分</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div v-if="scoreInfo.paperType == 1">
          <div class="items">
            <div class="label">给分：</div>
            <div class="value">
              <el-input
                size="small"
                class="remake"
                placeholder="满分为100分"
                oninput="value=value.replace(/[^0-9]|^0+(?!$)/g,'');if(parseInt(value)>100) value='100';"
                v-model="scoreInfo.sameScore"
                type="text"
              >
              </el-input>
            </div>
          </div>
        </div>
        <div
          v-if="scoreInfo.paperType == 2"
          style="max-height: calc(100vh - 330px); overflow: auto"
        >
          <div
            :id="item.studentId"
            class="items"
            v-for="(item, index) in scoreInfo.groupMemberList"
            :key="index"
          >
            <div class="label">{{ item.studentName }}：</div>
            <div class="value">
              <el-input
                size="small"
                placeholder="满分为100分"
                oninput="value=value.replace(/[^0-9]|^0+(?!$)/g,'');if(parseInt(value)>100) value='100';"
                v-model="item.leaderScore"
                type="text"
              >
              </el-input>
            </div>
          </div>
        </div>
      </div>
      <div v-if="title == '考核自评'">
        <div class="items">
          <div class="label">内容：</div>
          <div class="value">{{ scoreInfo.ancestorsName }}</div>
        </div>
        <div class="items">
          <div class="label">给分：</div>
          <div class="value">
            <el-input
              size="small"
              class="remake"
              placeholder="满分为100分"
              oninput="value=value.replace(/[^0-9]|^0+(?!$)/g,'');if(parseInt(value)>100) value='100';"
              v-model="scoreInfo.score"
              type="text"
            >
            </el-input>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getGroupMemberScore } from '@/api/exam/exam'

export default {
  name: 'courseTrees',
  data() {
    return {
      content: '',
      highlightedNodeId: '',
      title: '',
      keyId: '',
      loading: false,
      teacherScorePercent: 0,
      selfScorePercent: 0,
      leaderScorePercent: 0,
      otherGroupScorePercent: 0,
      scoreListInfo: [],
      scoreInfo: {
        score: '',
        sameScore: '',
        paperType: 1,
        groupMemberList: []
      },
      showScoreDialog: false
    }
  },
  props: {
    data: {
      type: Array,
      default: []
    },
    studentId: {
      type: [String, Number]
    },
    leaderId: {
      type: [String, Number]
    },
    type: {
      type: [String, Number],
      default: 'normal'
    },
    nodeCanSelected: {
      type: Boolean,
      default: false
    },
    nodeWidth: {
      type: [String, Number],
      default: '460'
    }
  },
  watch: {
    data: {
      handler(val, oldVal) {
        //反向递归，通过内容层反推计算父节点的状态
        val.forEach((item) => this.reverseCalculateStatus(item))
        if (oldVal.length == 0) {
          this.$nextTick(() => {
            if (this.nodeCanSelected) {
              this.highlightedNodeId = val[0].indexId
              this.$refs.selectTree.setCurrentKey(val[0].indexId)
              this.$emit('handleClick', val[0])
            }
          })
        } else {
          if (this.highlightedNodeId) {
            this.$nextTick(() => {
              if (this.nodeCanSelected) {
                this.$refs.selectTree.setCurrentKey(this.highlightedNodeId)
              }
            })
          }
        }
      },
      deep: true
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    scoreRouteTo(approvalType, keyId) {
      // approvalType  1-师评 2-组长评分(互评) 3-自评 4-组间互评
      this.$router.push({
        path: '/approvalAnswer',
        query: {
          keyId: keyId,
          userId: this.$store.getters.userId,
          routeSign: 'stu',
          approvalType: approvalType,
          leaderId: this.$store.getters.studentId,
          needNext: approvalType == 4 ? '1' : '0'
        }
      })
    },
    handleClick(data) {
      this.$emit('handleClick', data)
    },
    //锚点跳转
    scrollToAnchor(item) {
      const anchor = document.getElementById(item.studentId)
      if (anchor) {
        anchor.scrollIntoView({ behavior: 'smooth' })
      }
    },
    changePaperType() {
    },
    cancel() {
      this.scoreInfo.score = ''
      this.scoreInfo.sameScore = ''
      this.scoreInfo.paperType = 1
      this.scoreInfo.groupMemberList = []
      this.showScoreDialog = false
    },
    async submitForm() {

    },
    async showScoreInfo(examPaperId) {
      if (!examPaperId) {
        this.$modal.msgWarning('该考核无试卷，分数为教师手动赋分')
        return
      }
      this.loading = true
      let res = await getGroupMemberScore(examPaperId, this.studentId)
      const { code, data } = res
      if (code == 200) {
        this.loading = false
        if (data.length > 0) {
          this.teacherScorePercent = data[0].teacherScorePercent
          this.selfScorePercent = data[0].selfScorePercent
          this.leaderScorePercent = data[0].leaderScorePercent
          this.otherGroupScorePercent = data[0].otherGroupScorePercent
          for (const datum of data) {
            datum.teacherScore = (
              (datum.teacherScore / datum.totalScore) *
              100
            ).toFixed(2)
            datum.selfScore = (
              (datum.selfScore / datum.totalScore) *
              100
            ).toFixed(2)
            datum.leaderScore = (
              (datum.leaderScore / datum.totalScore) *
              100
            ).toFixed(2)
            datum.otherGroupScore = (
              (datum.otherGroupScore / datum.totalScore) *
              100
            ).toFixed(2)
          }
        }
        this.scoreListInfo = data
        let content = ''

        if (this.teacherScorePercent > 0) {
          content += `教师评价x${this.teacherScorePercent}%`
        }

        if (this.selfScorePercent > 0) {
          if (content !== '') {
            content += ` + 学生自评x${this.selfScorePercent}%`
          } else {
            content += `学生自评x${this.selfScorePercent}%`
          }
        }

        if (this.leaderScorePercent > 0) {
          if (content !== '') {
            content += ` + 组长评分x${this.leaderScorePercent}%`
          } else {
            content += `组长评分x${this.leaderScorePercent}%`
          }
        }

        if (this.otherGroupScorePercent > 0) {
          if (content !== '') {
            content += ` + 组间互评x${this.otherGroupScorePercent}%`
          } else {
            content += `组间互评x${this.otherGroupScorePercent}%`
          }
        }

        this.content = content
      } else {
        this.loading = false
      }
    },
    routeTo(id, examType) {
      if (!id) {
        this.$modal.msgWarning('该考核无试卷，分数为教师手动赋分')
        return
      }
      this.$router.push({
        path: '/examDetail',
        query: { id: id, examType: examType }
      })
    },
    // 1 学习中  2 已完成  0 未开始  -1 未通过
    /* 如果所有的 child 的 status 都等于 2，则将 obj 的 status 设置为2。
     * 有一个child 的 status 都等于 -1则将 obj 的 status 设置为-1。
     * 不满足以上条件，即否则，将 obj 的 status 设置为 1。*/
    calculateStatus(obj) {
      if (obj.children) {
        obj.status = obj.children.every((child) => {
          if (child.children) {
            this.calculateStatus(child)
          }
          return child.status == 2
        })
          ? 2
          : obj.children.some((child) => child.status == -1)
            ? -1
            : 1
      }
    },
    reverseCalculateStatus(obj) {
      if (obj.children) {
        obj.children.forEach((child) => this.reverseCalculateStatus(child))
        this.calculateStatus(obj)
      }
    },
    expandAll() {
      this.$nextTick(() => {
        this.expandAllNodes(this.$refs.selectTree.store.root)
      })
    },
    collapseAll() {
      this.$nextTick(() => {
        this.collapseAllNodes(this.$refs.selectTree.store.root)
      })
    },
    expandAllNodes(node) {
      if (node) {
        node.expanded = true
        if (node.childNodes) {
          node.childNodes.forEach((childNode) => {
            this.expandAllNodes(childNode)
          })
        }
      }
    },
    collapseAllNodes(node) {
      if (node) {
        node.expanded = false
        if (node.childNodes) {
          node.childNodes.forEach((childNode) => {
            this.collapseAllNodes(childNode)
          })
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.custom_tree_node {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px 0 0;
  box-sizing: border-box;

  .examSBtn {
    margin-left: 10px;
    font-size: 14px;
    color: #fa6400;
    // 下划线
    text-decoration: underline;
  }

  .homeworkSbtn {
    margin-left: 10px;
    font-size: 14px;
    color: #4e8dff;
    // 下划线
    text-decoration: underline;
  }

  .exam_icon {
    margin-top: 3px;
    // position: absolute;
    // top: 0;
    // left: -20px;
    width: 16px;
    height: 16px;
    background: #fa6400;
    border-radius: 3px;
    font-size: 12px;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 4px;
  }

  .leader_icon {
    margin-top: 3px;
    // position: absolute;
    // top: 0;
    // left: -20px;
    width: 16px;
    height: 16px;
    background: #4e8dff;
    border-radius: 3px;
    font-size: 12px;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 4px;
  }

  .state {
    height: 17px;
    margin-right: 4px;
    position: relative;
    display: flex;
    align-items: center;

    .round {
      width: 8px;
      height: 8px;
      border: 2px solid #19b300;
      border-radius: 50%;
    }

    .round_finish {
      width: 8px;
      height: 8px;
      background: #19b300;
      border-radius: 50%;
    }

    .round_fail {
      width: 8px;
      height: 8px;
      background: #ff3b30;
      border-radius: 50%;
    }

    .acting_icon {
      width: 16px;
      height: 16px;
    }

    .el-icon-success {
      font-size: 18px;
      color: #19b300;
    }

    .el-icon-error {
      font-size: 18px;
      color: #ff3b30;
    }
  }

  .flex_center {
    display: flex;
    align-items: center;

    .retest_count {
      font-size: 14px;
      color: #a6a6a6;
      margin-right: 10px;
    }

    .exam_paper_png {
      width: 32px;
      height: 32px;
    }
  }

  .label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

::v-deep .el-tree-node__content {
  height: 40px;
}

::v-deep .el-icon-success,
::v-deep .el-icon-error {
  font-style: normal;
}

.items {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .label {
    font-size: 14px;
    color: #939393;
  }

  .value {
    width: 300px;
    color: #333333;
    margin-left: 10px;
  }
}

.red_color {
  font-size: 14px;
  color: #ff3b30;
  margin: 0 10px;
  user-select: none;
  cursor: pointer;
}

.ju_color {
  font-size: 14px;
  color: #fa6400;
  margin: 0 10px;
  user-select: none;
  cursor: pointer;
}

.blue_color {
  font-size: 14px;
  color: #4e8dff;
  margin: 0 10px;
  user-select: none;
  cursor: pointer;
}
</style>
